<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城首页</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>商城后台管理系统</el-header>
            <el-container>
              <el-aside width="200px">
                  <el-menu>
                    <el-menu-item index="1">
                        <i class="el-icon-user"></i>
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span>分类管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-wallet"></i>
                        <span>商品管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-document"></i>
                        <span>订单管理</span>
                    </el-menu-item>
                  </el-menu>
              </el-aside>
              <el-main>Main</el-main>
            </el-container>
            <el-footer>By mldong 所有</el-footer>
        </el-container>
    </div>
    <script>
        const app = Vue.createApp({})
        app.use(ElementPlus);
        const vm = app.mount('#app')
    </script>
    <style>
        html,body{
            height: 100%;
        }
        #app{
            height: 100%;
            display: flex;
        }
        .el-header,
        .el-footer {
          background-color: #b3c0d1;
          color: var(--el-text-color-primary);
          text-align: center;
          line-height: 60px;
        }
        
        .el-aside {
          background-color: #d3dce6;
          color: var(--el-text-color-primary);
          text-align: center;
        }
        
        .el-main {
          background-color: #e9eef3;
          color: var(--el-text-color-primary);
          text-align: center;
        }
        
        body > .el-container {
          margin-bottom: 40px;
        }
        </style>
</body>
</html>